import React, { Suspense } from 'react'
import { router } from './router'
import { RouterItem } from '../unit/type'
import { BrowserRouter, HashRouter, Navigate, Route, Routes } from 'react-router-dom'


function routerView() {
  const { mode, routerList } = router
  const readerHome = (arr: RouterItem[]) => {
    return arr && arr.map((item, index) => {
      return <Route key={index} path={item.path}
        element={item.to ? <Navigate to={item.to}></Navigate> : <item.element></item.element>}>
        {
          item.children && readerHome(item.children)
        }
      </Route>
    })
  }
  return (
    <Suspense fallback={<div>加载中</div>}>
      {
        mode === 'history' ? <BrowserRouter>
          <Routes>
            {
              readerHome(routerList)
            }
          </Routes>
        </BrowserRouter> : <HashRouter>
          <Routes>
            {
              readerHome(routerList)
            }
          </Routes>
        </HashRouter>
      }
    </Suspense>
  )
}

export default routerView
